/*
 * @Author: 肖思汗 
 * @Date: 2025-07-12 15:41:18 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-12 16:02:13
 */

import { Button } from "@nutui/nutui-react-taro";
import { Image, View } from "@tarojs/components";
import MyPopup from "src/components/MyPopup/MyPopup";
import { ColorPicker } from "./common/ColorPicker";
import "./css/styles.less";
import styles from "./hexColorPicker.module.less";
import { ColorModel, ColorPickerBaseProps } from "./HexColorPickerTypes";
import allApplySVG from "./imgs/allApply.svg";
import { equalHex } from "./utils/compare";
import { hexToHsva, hsvaToHex } from "./utils/convert";
import currentApplySVG from "./imgs/currentApply.svg";
import React from "react";

const colorModel: ColorModel<string> = {
    defaultColor: "000",
    toHsva: hexToHsva,
    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
    equal: equalHex
};

export const HexColorPicker = (props: Partial<ColorPickerBaseProps<string> & { title?: string, children: React.ReactNode }>): JSX.Element => (
    <MyPopup
        title={props.title || "颜色选择器"}
        open={props.visible}
        className={styles.hexColorPicker}
        onClose={props.onCancel}
        hasMark={false}
    >
        <View className={styles.header} >
            <Button
                className={styles.allApply}
                onClick={() => props.onOK && props.onOK(true)}
            >
                {/* <Image
                    src={allApplySVG}
                    className={styles.icon}
                /> */}
                应用全部
            </Button>

            <Button
                className={styles.apply}
                onClick={() => props.onOK && props.onOK(false)}
            >
                {/* <Image
                    src={currentApplySVG}
                    className={styles.icon}
                /> */}
                确定
            </Button>
        </View>
        <ColorPicker
            {...props}
            style={{ width: "100%" }}
            colorModel={colorModel}
        />
        {props.children}
    </MyPopup>
);
